<template>
	<view style="margin-bottom: 8rpx;">
		<view class="img-box">
			<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
				<image @click="preImg(index)" class="img" :src="getImg(imgList[index])" mode="aspectFill" :style="{ width: width + 'rpx', height: width + 'rpx' }"></image>
				<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><image class="close-icon" src="../../static/new/cancle.png"></image></view>
			</view>
			<view class="add-jietu" @tap="ChooseImage" v-if="imgList.length < 9" :style="{ width: width + 'rpx', height: width + 'rpx' }">
				<image src="../../static/new/xxaddimg.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/config/config.js'
export default {
	data() {
		return {
			list: [],
			imgList: [],
			maxImg: 9
		};
	},
	props: {
		val: { // 必须要使用value
			type: Array,
			default: () => []
		},
		width: {
			type: [String, Number],
			default: 100
		}
	},
	watch: {
		val(e) {
			this.list = [];
			this.imgList=[];
			if (e && e.length > 0) {
				e.forEach(item => {
					this.imgList.push(item)
					this.list.push(item)
				})
				this.mutilSuccess()
			}
		}
	},
	methods: {
		getImg(url){
			if(url.indexOf('profile')>-1&&url.indexOf('http')==-1){
				return this.tui.imgUrl()+url
			}else{
				return url
			}
		},
		 childMethod() {
			 this.list=[];
			 this.imgList=[];
			 this.mutilSuccess()
		            },
		preImg(index) {
			uni.previewImage({
				urls: this.imgList,
				current: index
			})
		},
		ChooseImage() {
			uni.chooseImage({
				count: this.maxImg - this.list.length,
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				// sourceType: ['album'], //从相册选择
				success: (res) => {
					if (this.imgList.length != 0) {
						this.imgList = this.imgList.concat(res.tempFilePaths)
					} else {
						this.imgList = res.tempFilePaths
					}
					console.log(this.imgList)
					this.submit()
				}
			});
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '提示',
				content: '确定要删除吗？',
				cancelText: '否',
				confirmText: '是',
				success: res => {
					if (res.confirm) {
						let curIndex = e.currentTarget.dataset.index
						this.imgList.splice(curIndex, 1)
						this.list.splice(curIndex, 1)
						this.mutilSuccess()
					}
				}
			})
		},
		async submit() {
			uni.showLoading({
				title: '图片上传中...',
				mask: true
			})
			let result = await this.uploads()
			this.list = this.list.concat(result)
			this.mutilSuccess()
			uni.hideLoading()
		},
		//小程序不支持多文件上传
		async uploads() {
			const that = this
			let arr = []
			for (let k in that.imgList) {
				let result = await that.up_img(that.imgList[k])
				if (result) {
					// let path = result.substring(result.lastIndexOf("/") + 1)
					// let url = that.tui.imgUrl() + 'etoyoMallApi/file/getFile?filename=' + path
					let url = result
					arr.push(result.fileName)
					that.imgList[k] = result.url
				}
			}
			return arr;
		},
		up_img(url) {
			const that = this
			return new Promise((resolve, reject) => {
				if (url.indexOf('qiniulv.whle.cn') !== -1) {
					resolve(false)
				} else {
					uni.uploadFile({
						url: baseUrl + '/common/upload',
						filePath: url,
						name: 'file',
						// header: {
						// 	// 'Authorization':that.tui.getToken()? "Bearer "+that.tui.getToken():""
						// },
						success: (uploadFileRes) => {
							let jsonResult = JSON.parse(uploadFileRes.data)
							if (jsonResult.code != 0) return
							
							resolve(jsonResult)
						},
					});
				}
			})
		},
		mutilSuccess() {
			let array = []
			this.list.forEach(item => {
				array.push(item)
			})
			this.$emit('input', array)
			
		}
	},
	mounted() {
		// this.list = []
		// this.imgList=[]
		// if (this.val && this.val.length > 0) {
		// 	this.val.forEach(item => {
		// 		this.list.push(item)
		// 		this.imgList.push(item)
		// 	})
			
		// 	this.mutilSuccess()
		// }
	}
}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
.img-box {
	// display: flex;

	.bg-img {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		display: inline-block;
		margin-right: 20rpx;
		margin-top: 20rpx;
		position: relative;

		.img {
			// width: 180rpx;
			// height: 180rpx;
		}

		.close-icon {
			width: 34rpx;
			height: 34rpx;
			position: absolute;
			right: -6upx;
			top: -6upx;
			border-radius: 50%;
		}
	}

	.add-jietu {
		// width: 180upx;
		// height: 180upx;
		// padding-left: 10rpx;
		border-radius: 6upx;
		display: inline-block;
		margin-right: 20upx;
		margin-top: 10rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
